$.ajax({
    url:"http://localhost:3000/databases/goods.json",
    success:(res)=>{
        class BigImg{
            constructor(){
                this.sBox = document.querySelector(".MagicZoom");
                this.sBimg = document.querySelector(".main_img");
                this.sBspan = document.querySelector(".smallSpan");
                this.bBox = document.querySelector(".bigBox");
                this.bBimg = document.querySelector(".bigBox img");
        
                this.li = document.querySelectorAll(".t1 a");
               res.forEach(err => {
                this.data = err.imgs;
               });
 
                this.index = 0;
                // 2. 根据默认索引初始化样式
                // this.init();
                // 3. 绑定事件
                this.addEvent()
                // console.log(this.data)
            }
            init(){
                for(let i=0;i<this.li.length;i++){
                    this.li[i].style.borderColor = "transparent";
                }
                this.li[this.index].style.borderColor = "blue";
                this.sBimg.src = this.data[this.index];
                this.bBimg.src = this.data[this.index];
                
            }
            addEvent(){
                const that = this;
                for(let i=0;i<this.li.length;i++){
                    this.li[i].index = i;
                    this.li[i].onclick = function(){
                        // 4. 取消默认索引对应的样式，并给当前点击的索引添加样式
                        that.li[that.index].style.borderColor = "transparent";
        
                        that.li[this.index].style.borderColor = "blue";
                        that.sBimg.src = that.data[this.index];
                        that.bBimg.src = that.data[this.index];
                        
                        // 5. 点击功能执行结束后，将默认索引修改成点击的索引
                        that.index = this.index;
                    }
                }
                this.sBox.onmouseover = function(){
                    that.show()
                }
                this.sBox.onmouseout = function(){
                    that.hide()
                }
                this.sBox.onmousemove = function(eve){
                    const e = eve || window.event;
                    that.move(e)
                }
            }
            show(){
                this.sBspan.style.display = "block";
                this.bBox.style.display = "block";
                this.sBspan.style.width = this.bBox.offsetWidth / this.bBimg.offsetWidth * this.sBox.offsetWidth + "px";
                this.sBspan.style.height = this.bBox.offsetHeight / this.bBimg.offsetHeight * this.sBox.offsetHeight + "px";
                // console.log(this.bBimg.offsetHeight)
            }
            hide(){
                this.sBspan.style.display = "none";
                this.bBox.style.display = "none";
            }
            move(e){
                let l = e.pageX - this.sBox.offsetLeft - this.sBspan.offsetWidth - 10/ 2;
                let t = e.pageY - this.sBox.offsetTop - this.sBspan.offsetHeight - 400/ 2;
                // console.log(this.sBox.offsetTop+this.sBspan.offsetHeight)
               
                if(l<0) l=0;
                if(t<0) t=0; 
                if(l>this.sBox.offsetWidth-this.sBspan.offsetWidth){
                    l=this.sBox.offsetWidth-this.sBspan.offsetWidth
                }
                if(t>(this.sBox.offsetHeight-this.sBspan.offsetHeight)){
                    t=this.sBox.offsetHeight-this.sBspan.offsetHeight
                }
                this.sBspan.style.left = l + "px";
                this.sBspan.style.top = t + "px";
                const x = l / (this.sBox.offsetWidth-this.sBspan.offsetWidth);
                const y = t / (this.sBox.offsetHeight-this.sBspan.offsetHeight);
                this.bBimg.style.left = -x * (this.bBimg.offsetWidth - this.bBox.offsetWidth) + "px";
                this.bBimg.style.top = -y * (this.bBimg.offsetHeight - this.bBox.offsetHeight) + "px";
                
            }
        }
        new BigImg();
    },
    dataType:"json"
})

// xuanran
const id = location.search.split("=")[1];
$.ajax({
    url:"http://localhost:3000/databases/goods.json",
    data:{
        type:"detail",
        id:id
    },
    success:res=>{
        if(id === itemId){
        console.log(res)
        $(".left-pro .t2 .MagicZoom").children("img")[0].src = res[i].src;
        
        }
    },
    dataType:"json"

})

